<script>
export default {
  name: "searchFromIndex",
  props: {
    formValue: {
      type: [Object]
    },
    colum: {
      type: [Array],
      default: function () {
        return []
      }
    },
    titleWidth: {
      type: [String],
      default: function () {
        return ''
      }
    },
    itemWidth: {
      type: [Object],
      default: function () {
        return {}
      }
    },
    titleAlign: {
      type: [String],
      default: function () {
        return 'right'
      }
    }
  },
  computed: {
    newFormValue: {
      get: function () {
        return this.formValue
      },
      set: function (value) {
        this.$emit('update:formValue', value)
      }
    }
  },
  data () {
    return {
      childSlot: []
    }
  },
  methods: {
    trimValue (val) {
      if (!Array.isArray(val)) {
        if (typeof val === 'string') {
          return (val || '').trim()
        }
      }
      return val
    },
    componentChild(h, it) {
      let that = this
      return h(it.componentName,
        {
          modifiers: { trim: true },
          style: Object.assign({
            width: '100%'
          }, it.style || {}),
          class: it.class || {},
          props: Object.assign({
            dictTypeCode: it.dictTypeCode,
            value: that.newFormValue[it.value],
            clearable: it.clearable || false,
            filterable: it.filterable || false,
            multiple: it.multiple || false,
            size: it.size
          }, it.attrs || {}),
          ref: it.ref,
          attrs: {
            placeholder: it.placeholder
          },
          domProps: Object.assign({}, it.comDomProps),
          on: Object.assign(it.listen || {}, {
            input: (object) => {
              if (!object || object.length === 0) {
                this.$set(that.newFormValue, it.value, undefined)
              } else {
                this.$set(that.newFormValue, it.value, that.trimValue(object))
              }
            },
            selectChanged: (object) => {
              this.$emit('selectChanged', object)
            }
          })
        }
      )
    },
    slotComponentChild(h, it) {
      let childNode = []
      if (this.childSlot[it.prop]) {
        childNode = this.childSlot[it.prop]
      }
      return h('div',
        {
          style: Object.assign({
            width: '100%'
          }, it.style || {}),
        },
        childNode
      )
    },
    childFun(h, it) {
      let componentChilds = []
      if (it.slot) {
        componentChilds.push(this.slotComponentChild(h, it))
      } else {
        componentChilds.push(this.componentChild(h, it))
      }
      return h('el-col',
        {
          style: it.elcolStyle || this.itemWidth,
          props: Object.assign({xs: 8, sm: 8, md: 8, lg: 8, xl: 8}, this.itemWidth || it.colXS),
        },
        [
          h('vxe-form-item',
            {
              style: {
                width: it.itemWidth || '100%'
              },
              props: {
                field: it.prop,
                titleWidth: it.titleWidth || (this.titleWidth || null),
                titleAlign: it.titleAlign || this.titleAlign,
                label: it.label || '',
                title: it.title || '',
                labelWidth: it.labelWidth || '0px',
                prop: it.prop
              },
            },
            componentChilds
          )
        ]
      )
    },
    renderFun(h) {
      let childs = []
      this.colum.forEach(it => {
        if (!it.hasOwnProperty('show') || it.show) {
          childs.push(this.childFun(h, it))
        }
      })
      return h('div', {}, childs)
    },
    // 全slot
    allSlotFun (h, childSlot) {
      return h('vxe-form-item', {
      }, childSlot)
    }
  },
  render(h) {
    if (this.$scopedSlots.default().length > 0 && this.$scopedSlots.default()[0].context.$slots) {
      this.childSlot = this.$scopedSlots.default()[0].context.$slots
    }
    if (this.childSlot.default && this.childSlot.default.length > 0 && this.colum.length === 0) {
      return this.allSlotFun(h, this.childSlot.default)
    } else {
      return this.renderFun(h)
    }
  }
}
</script>
